[Красавчег]

В общем, переделывал я тут как-то для себя блок "Поделиться" от Яндекса и вроде неплохо так получилось, что даже жалко) блин стало, что они у меня одного будут стоять (странно как-то - ведь обычно)) все наоборот происходит). В общем, решил я с вами поделиться своими кнопками "поделиться". Во, как сказанул)

Немного предыстории. Очень многие из нас ставят себе на сайты яндексовские соцкнопки (ну и я тоже, как вы уже наверное успели заметить) но они, блин, такие уже заезженные, что просто смотреть на них не хочется, не то что ставить себе на сайт. Ну, вот и решил я, короче, поэкспериментировать над ними. Главный смысл был в том, чтобы скрипт этих кнопок оставался "яндексовским" и соответственно, чтобы все переходы с этих кнопок (а возможно и другие действия) в ЯндексМетрике продолжали учитываться.

В общем, выкинул я оттуда и саму эту ЯндексКнопку с выпадающим окном и всю туеву хучу тех социалок, на которые нажимают наверное только какие-нибудь "редкие птицы, долетевшие до середины днепра". В общем оставил я там, на мой взгляд, только самое нужное. Еще раз хочу заметить, что скрипт при подключении используется родной "яндексовский", мы только меняем его внешний вид. Итак, поехали:


1-й вариант.

Хотелось чего-то стильного) и первый вариант я сделал "под металлик". При наведении на любую из кнопок она меняется на цветную.

Ниже скриншот как это выглядит. Поглядеть на это вживую и скачать исходники можно здесь: http://yashare.narod.ru/index.html




2-й вариант.

А почему бы не сделать наоборот? И сделал "цветной" вариант. Тут уже при наведении на любую цветную кнопку она становится серой.

Ниже скриншот как это выглядит, а посмотреть вживую и скачать исходники можно вот здесь: http://yashare.narod.ru/variant2.html




3-й вариант.

Ну, и выкладываю третий вариант (это я раньше экспериментировал) вот все думал, показывать или нет? Ну, да ладно. Может тоже кому-то пригодится. Итак, здесь можно у кнопки менять сам текст (это уже само по себе привлекает внимание посетителя, можно написать например: "тыкать сюды" или "Не жмись, ссылкой поделись" или вообще "Не смотри сюда, блеать!" а можно.. ох, что-то уже понесло меня) ну, в общем, можно менять у кнопки текст. Вот.

Далее, в выпадающее окно добавлено поле с урлом страницы для копирования (в скрипте по умолчанию яндексоиды его почему-то не сделали) и в это же выпадающее окно были засунуты ссылки на все-все-все социалки какие только можно было всунуть. Да и грех было) не засунуть - окно-то ведь свернутое всегда и эта куча кнопок никому глаза не мозолит, а так, глядишь, может какой "фриендфид" и тыкнет когда-нибудь.

Ну, а рядом с самой ЯндексКнопкой, опять же, вывел только самые нужные и наиболее часто, на мой взгляд, используемые (ну, может если только кроме кнопки "блоггера"). Опять же, любые кнопки вы там можете легко заменить, выкинуть или поставить именно нужные вам.

Ниже скриншот как это выглядит. Поглядеть на это вживую и скачать исходники можно здесь: http://yashare.narod.ru/variant3.html




Ну, вот такие пироги, друзья. Вроде неплохо так получилось - сделали "неприевшиеся" кнопки для социалок и при этом не используем никаких скриптов сторонних сервисов. Вот.

P.S. - а еще, когда решил этим всем "добром" поделиться, всё думал куда бы файлы эти все скинуть, а потом взял да и тупо забубенил) это все на http://narod.yandex.ru/ - вот и польза от него)

[kvins]

Спс то что нужно , тока фотки для социалок нужно будет на свои поменять под дизайн сайта

[genjnat]

Жаль народ тормозит - не могу в действии посмотреть.
Но по любому, за идейку спасибо.
Пару вопросов, все это дело, по прежнему на JS работает?
В исходном коде не будет свалки из ссылок на все эти социалки?
Со скоростью загрузки, как?
После такого вот редизайна - метрика клики считать будет?

Последнее
Идея на подумать - при наведении кнопка увеличивается в размере и на ней появляется надпись - поделиться, к себе, в копилку, съешь меня. Незнаю, не придумал еще. Но суть идеи должна быть понятна.
Вот такую цацу, пожалуй даже и купил бы, и не я один

Ага, открылась ссылка.
Вопросы по первым трем пунктам закрываю, а остальное в силе

[Красавчег]

genjnat, весь код у кнопок стандартный:

Код HTML:

<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,moimir,odnoklassniki,twitter,gplus,facebook,lj"></div>

Это код Яндекса. Мы только делаем у этого блока "поделиться" другой внешний вид.

Клики в метрике считаются. Тормозить ничего не будет. На демо это хорошо видно.

[lexxx]

Спасибо за проделанную работу!
Я так понял вы только нарисовали свою картинку со всеми кнопками и изменили стили, правильно?

[genjnat]

На демо это хорошо видно.

Да, я видел уже.
А как насчет - развить идею?

при наведении кнопка увеличивается в размере и на ней появляется надпись - поделиться, к себе, в копилку, съешь меня.

Или не получится?

[Красавчег]

нарисовали свою картинку со всеми кнопками и изменили стили, правильно?

Да. Я изменил только внешний вид. Сам скрипт и все функции остаются те же самые.

---------- Сообщение добавлено 16:20 ---------- Предыдущее 16:18 ----------

А как насчет - развить идею?

genjnat, нет времени. Слишком сейчас нагружен своими проектами.

[buninsan]

плюсанул и спасибо за проделанную работу, а то яндекс вариант как всегда минималистичен

[WMmagnat]

Хм..а прикольно получилось, а то я замучался с этим стандартным вариантом от Яндекса!